import React from 'react';
import { Card, Badge, Statistic } from 'antd';
import { UserOutlined, RobotOutlined, GlobalOutlined } from '@ant-design/icons';
import clsx from 'clsx';
import type { Language, PersonType } from '../types';
import { TAB_MENUS } from '../utils/constants';

interface TabMenuProps {
  activeLanguage: Language;
  activePersonType: PersonType;
  onLanguageChange: (language: Language) => void;
  onPersonTypeChange: (type: PersonType) => void;
  totalCount?: number;
}

// 选项卡菜单组件
const TabMenu: React.FC<TabMenuProps> = ({
  activeLanguage,
  activePersonType,
  onLanguageChange,
  onPersonTypeChange,
  totalCount = 0
}) => {
  // 获取当前语言下的二级菜单
  const currentSubMenus = TAB_MENUS.find(menu => menu.key === activeLanguage)?.children || [];

  // 模拟各类型数据统计（实际项目中应该从API获取）
  const getTypeCount = (type: PersonType) => {
    const counts = {
      'AnimeGirl': 156,
      'AnimeMan': 89,
      'Girl': 234,
      'Man': 167
    };
    return counts[type] || 0;
  };

  const getTypeIcon = (type: PersonType) => {
    const icons = {
      'AnimeGirl': '👧',
      'AnimeMan': '👦',
      'Girl': '👩',
      'Man': '👨'
    };
    return icons[type] || '👤';
  };

  return (
    <div className="mb-8">
      {/* 一级菜单 - 语言选择 */}
      <div className="mb-6">
        <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
          <GlobalOutlined className="text-blue-500" />
          市场
        </h3>
        <div className="flex gap-3">
          {TAB_MENUS.map((menu) => (
            <div
              key={menu.key}
              onClick={() => onLanguageChange(menu.key)}
              style={{ cursor: "pointer" }}
              className={clsx(
                'relative px-4 py-2 rounded-xl font-semibold transition-all duration-300',
                'border-2 focus:outline-none focus:ring-4 focus:ring-blue-200',
                'transform hover:scale-105 active:scale-95',
                {
                  'bg-gradient-to-r from-blue-500 to-blue-600 text-white border-blue-500 shadow-xl':
                    activeLanguage === menu.key,
                  'bg-white text-gray-700 border-gray-200 hover:border-blue-300 hover:text-blue-600 hover:shadow-md':
                    activeLanguage !== menu.key
                }
              )}
            >
              <div className="flex items-center gap-2">
                <span>{menu.key === 'JP' ? '🇯🇵' : '🇺🇸'}</span>
                <span>{menu.label}</span>
              </div>
              {activeLanguage === menu.key && (
                <div className="absolute -top-1 -right-1">
                  <Badge dot className="bg-yellow-400" />
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* 二级菜单 - 人物类型选择 */}
      <div>
        <h3 className="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
          <UserOutlined className="text-purple-500" />
          人物类型
        </h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {currentSubMenus.map((subMenu) => (
            <div
              key={subMenu.key}
              onClick={() => onPersonTypeChange(subMenu.key)}
              style={{ cursor: "pointer" }}
              className={clsx(
                'relative p-1 rounded-lg text-sm font-medium transition-all duration-300',
                'border-2 focus:outline-none focus:ring-2 focus:ring-purple-400',
                'transform hover:scale-105 active:scale-95',
                {
                  'bg-gradient-to-br from-purple-100 to-purple-200 text-purple-800 border-purple-300 shadow-md':
                    activePersonType === subMenu.key,
                  'bg-white text-gray-600 border-gray-200 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800':
                    activePersonType !== subMenu.key
                }
              )}
            >
              <div className="flex flex-col items-center gap-1">
                <span className="text-2xl">{getTypeIcon(subMenu.key)}</span>
                <span className="font-medium">{subMenu.label}</span>
                {/* <Badge
                  count={getTypeCount(subMenu.key)}
                  className="text-xs"
                  style={{
                    backgroundColor: activePersonType === subMenu.key ? '#722ed1' : '#d9d9d9',
                    color: activePersonType === subMenu.key ? 'white' : '#666'
                  }}
                /> */}
              </div>
              {activePersonType === subMenu.key && (
                <div className="absolute -top-1 -right-1">
                  <Badge dot className="bg-green-400" />
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default TabMenu; 